<template>
    <div class="containerBox" id="test">
        <div class="container-top">
            <div class="topOther">
                <h3>真格基金><span>徐小平</span></h3>
                <h5>服务地区：北京</h5>
                <div class="investLead">
                    <p>投资领域：</p>
                    <ul>
                        <li>领域一</li>
                        <li>领域二</li>
                        <li>领域三</li>
                        <li>领域四</li>
                    </ul>
                </div>

                <div class="investLead">
                    <p>标签：</p>
                    <ul>
                        <li>领域一</li>
                        <li>领域二</li>
                        <li>领域三</li>
                        <li>领域四</li>
                    </ul>
                </div>
              <!-- <p>{{btext}}</p>-->
            </div>
            <div class="share">
                <p class="shareWord">分享</p>

            </div>

        </div>
        <div class="contact">
            <div class="listCount" id="listInfo">
                <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize) "
                          stripe
                          style="width: 100%">
                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <div class="count" property="name">1</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="370">
                        <template slot-scope="scope">
                            <dl class="project-info">
                                <dt class=""><img src="../../assets/logo.png" /></dt>
                                <dd>
                                    <p>{{ scope.row.name }}</p>
                                    <p>{{ scope.row.address }}</p>
                                    <p>{{ scope.row.name }}</p>
                                </dd>
                            </dl>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template  slot-scope="scope">
                            <div class="investInfo">
                                <p>项目名称</p>
                                <p>所属领域</p>
                                <p>城市</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column name="index">
                        <template  slot-scope="scope">
                            <div class="investInfo">
                                <p>项目名称</p>
                                <p>所属领域</p>
                                <p>城市</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                                    type="text"
                                    size="small">
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-pagination
                        ref="tableData"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="tableData.length">
                </el-pagination>
            </div>
        </div>

    </div>



</template>
<script>
    import "../../style/css/container.css"
    import eventVue from '../../script/event.js'
    export default{
        methods: {
            bbtn:function(){
                eventVue .$on("myfun",(itemList)=>{   //这里最好用箭头函数，不然this指向有问题
                    //this.btext = itemList;
                //console.log(itemList)

            })
            },
            deleteRow(index, rows) {
                var r=confirm("删除后此项目无法推送给投资人,确定要删除此项目？")
                if (r==true) {
                    rows.splice(index, 1);
                }
                else {

                }
       //confirm("删除后此项目无法推送给投资人<br/>确定要删除此项目？")

    },
    //从服务器读取数据
    loadData: function( pageNum, pageSize){
        this.$http.get(this.url,{pageNum:pageNum, pageSize:pageSize}).then(function(res){
            this.tableData = res.data.tableData;
            this.total = res.data.total;
        },function(){
            console.log('failed');
        });
    },
    //每页显示数据量变更
    handleSizeChange: function(val) {
        this.pagesize = val;
        this.loadData( this.currentPage, this.pagesize);
    },

    //页码变更
    handleCurrentChange: function(val) {
        this.currentPage = val;
        this.loadData(this.currentPage, this.pagesize);
    },
  /*  handleSizeChange: function (size) {
        this.pagesize = size;
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
    }*/
    },
    created:function(){
            this.bbtn();
    },
        data() {
        return {
            btext:'电话费手机客户',
            data: [],
            currentPage:1,
            pagesize:5,
            total:0,//默认数据总数
            totalCount:0,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎1',
                address: '上海市普陀区金沙江路 1518 弄'

            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },  {
                date: '2016-05-01',
                name: '王小虎2',
                address: '上海市普陀区金沙江路 1519 弄'
            },  {
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎4',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎5',
                address: '上海市普陀区金沙江路 1516 弄'
            },  {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
        };
    },


    }
</script>
<style scoped>

</style>